<!DOCTYPE html>

<head>
	<meta charset="utf-8">
	<title>资产时序图</title>
	<!--	//该页面应用的是echarts3.0-->
	<!--<script src="lib/echarts-2.2.7/build/dist/echarts.js"></script>-->
	<script src="lib/echarts.js"></script>
	<!--引入Jquery-->
	<script type="text/javascript" src="lib/jquery-3.1.1.js"></script>
	<script type="text/javascript">
		var $311 = $; //新的命名
	</script>
	<!--引入bootstrap文件-->
	<link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.7/css/bootstrap.min.css">
	<script src="lib/bootstrap-3.3.7/js/bootstrap.min.js"></script>
	<!--以下的引用全部和同源攻击相同-->
	<!--精确到秒的datapiker-->
	<link type="text/css" href="lib/common_attack_source_analysis/css/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
	<link type="text/css" href="lib/common_attack_source_analysis/css/jquery-ui-timepicker-addon.css" rel="stylesheet" />
	<script type="text/javascript" src="lib/common_attack_source_analysis/js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
		var $171 = $; //新的命名
	</script>
	<script type="text/javascript" src="lib/common_attack_source_analysis/js/jquery-ui-1.8.17.custom.min.js"></script>
	<script type="text/javascript" src="lib/common_attack_source_analysis/js/jquery-ui-timepicker-addon.js"></script>
	<script type="text/javascript" src="lib/common_attack_source_analysis/js/jquery-ui-timepicker-zh-CN.js"></script>
	<!--带提示的输入框-->
	<link type="text/css" rel="stylesheet" href="lib/common_attack_source_analysis/css/fm.tagator.jquery.css" />

	<script type="text/javascript" src="lib/common_attack_source_analysis/js/fm.tagator.jquery.js"></script>

</head>

<body>
	<!-- 模态框（Modal） -->
	<script>
		$311.SHOWMODAL = function() {
			$311('#myModal').modal({
				show: true,
				backdrop: true
			});
		};
	</script>
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="btn btn-default" style="float: right;" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>

				</div>
				<div class="modal-body">
					<!--
	作者：542440582@qq.com
	时间：2017-01-13
	描述：表格部分
-->
					<caption>攻击列表：</caption>
					<ul id="show_atkip">

					</ul>
					<caption>发生的事件：</caption>
					<ul id="show_sjmc">

					</ul>

				</div>
				<div class="modal-footer">

				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>

	<script>
		//预先设定一些ips
		$.ajaxSetup({
			async: false
		});
		$.get('static/data/common_attack_source_analysis/data.json', function(data) {
			ip_array = [];
			var nodes = data.nodes;
			nodes.forEach(function(item, i) {
				ip_array.push(item.name);
			});

		});
		//console.log(ips_array);
	</script>
	<script>
		//自动补全
		$(function() {

			if($('#inputTagator').data('tagator') === undefined) {
				$('#inputTagator').tagator({
					autocomplete: ip_array
				});

			} else {
				$('#inputTagator').tagator('destroy');

			}

		})
	</script>

	<div class="row" style="align-content: center;">
		<center>
			<div class="row">
				<span>资产名称：<input type="text" id="zcmc"  value=""></span>
				<span>资产编号：<input type="text" id="zcbh" value=""></span>
				<span>请输入资产IP：<input id="inputTagator" name="inputTagator" class="inputTagator" style="100px"></span>
			</div>

			<span>起始时间：<input type="text" id="start_time" class="ui_timepicker" value=""></span>
			<span>结束时间：<input type="text" id="end_time" class="ui_timepicker" value=""></span>

			<button id="getvalue" type="button" class="btn btn-success">生成资产时序图</button>

		</center>
	</div>

	<script>
		$171(function() {
			$171(".ui_timepicker").datetimepicker({
				//showOn: "button",
				//buttonImage: "./css/images/icon_calendar.gif",
				//buttonImageOnly: true,
				showSecond: true,
				timeFormat: 'hh:mm:ss',
				stepHour: 1,
				stepMinute: 1,
				stepSecond: 1
			})
		})
	</script>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<center>
		<div class="col-md-2" style="height:600px;margin-top: 7.5%;">
			<h6 id="web_ST"></h6>
		</div>
		<div id="main" class="col-md-8" style="height:600px;margin-top: 5%;"></div>
		<div class="col-md-2" style="height:600px;margin-top: 7.5%;">
			<h6 id="web_ET"></h6>
		</div>
	</center>
	<script type="text/javascript">
		$("#getvalue").click(function() {
			var search_string = $("#inputTagator").val();
			var start_time = $("#start_time").val();
			var end_time = $("#end_time").val();
			var zcmc = $("#zcmc").val();
			var zcbh = $("#zcbh").val();

			if(search_string === "" || start_time === "" || end_time === "" || zcmc === "" || zcbh === "")

				alert("请输入正确的资产信息和正确的起止时间");
			else {
				$("#web_ST").html("开始时间" + start_time);
				$("#web_ET").html("结束时间" + end_time);
				var ip_array = [];
				ip_array = search_string.split(",");

				
				//计算时间轴长度，以小时为单位
				begintime_ms = Date.parse(new Date(start_time.replace(/-/g, "/")));
				var endtime_ms = Date.parse(new Date(end_time.replace(/-/g, "/")));
				var time_gap = endtime_ms - begintime_ms;

				var days_gap = Math.floor(time_gap / (24 * 3600 * 1000));
				var leave1 = time_gap % (24 * 3600 * 1000);
				var hours_gap = Math.floor(leave1 / (3600 * 1000));
				hours_gap = hours_gap + days_gap * 24;

				var count = 0;
				var step = parseInt(hours_gap / 10);
				var hours = [];
				while(count < hours_gap) {

					hours.push(count.toString() + "h after");
					count++;
				}

				//console.log(hours);

				//获取资产被攻击的所有信息项
				var attacker_ip;
				var underattacker_ip;

				data_pre = []; //画图用的data
				
				
				//构造输入数据格式
				var input_data = {};
				input_data.zcbh = zcbh;
				input_data.zcmc = zcmc;
				input_data.ip = ip_array[0];//这里虽然可以输入多个ip，但是默认只接受第一个ip作为查询对象
				input_data.starttime = start_time;
				input_data.endtime = end_time;
				//var data =  接口（）;
				
				/*等待联调数据*/
				$.get('static/data/zichan_shixu/data.json', function(data) {
					//console.log(data);
					//获取到data_pre中的每一项值
					data.data.forEach(function(item, i) {
						//通过连接方向决定攻击者和被攻击者
						var one_data = [0]; //每次需要重置one_data
						var one_data_atk = [];
						var one_data_sj = [];
						var direction = item.ljfx;
						if(direction === 1) {
							attacker_ip = item.ycip;
							underattacker_ip = item.bdip;

						} else {
							attacker_ip = item.bdip;
							underattacker_ip = item.ycip;
						}
						if(underattacker_ip === ip_array[0]) {
							var end_time_ms_inner = Date.parse(new Date(item.sj.replace(/-/g, "/")));
							var time_gap_inner = end_time_ms_inner - begintime_ms;

							var days_gap_inner = Math.floor(time_gap_inner / (24 * 3600 * 1000));
							var leave1_inner = time_gap_inner % (24 * 3600 * 1000);
							var hours_gap_inner = Math.floor(leave1_inner / (3600 * 1000));
							hours_gap_inner = hours_gap_inner + days_gap_inner * 24;
							if(data_pre.length === 0) {
								one_data.push(hours_gap_inner);
								one_data.push(1);
								one_data_atk.push(attacker_ip);
								one_data_sj.push(item.sjmc);
								one_data.push(one_data_atk, one_data_sj);
								data_pre.push(one_data);

							} else {
								var have_same_flag = 0
								data_pre.forEach(function(item_inner, i_inner) {
									if(item_inner[1] === hours_gap_inner) {
										item_inner[2] += 1;
										if(item_inner[3].indexOf(attacker_ip) === -1) {
											item_inner[3].push(attacker_ip);
										}
										if(item_inner[4].indexOf(item.sjmc) === -1) {
											item_inner[4].push(item.sjmc);
										}

										have_same_flag = 1;

									}
								});
								if(have_same_flag === 0) {
									one_data.push(hours_gap_inner);
									one_data.push(1);
									one_data_atk.push(attacker_ip);
									one_data_sj.push(item.sjmc);
									one_data.push(one_data_atk, one_data_sj);
									data_pre.push(one_data);

								}

							}

						}

					});

				});
			
			
			
			console.log(data_pre);
				var myChart = echarts.init(document.getElementById('main'));
				myChart.on('click', function(params) {
					var fssj = params.data[0];
					data_pre.forEach(function(item, i) {
						if(item[1] === fssj) {

							//alert(item[3]+item[4]);
							$("#show_atkip").find('li').remove();
							$("#show_sjmc").find('li').remove();
							item[3].forEach(function(item_inner1, i_inner1) {
								$("#show_atkip").append('<li></li>');
								$("#show_atkip").find('li').last().html(item_inner1);
							});
							item[4].forEach(function(item_inner2, i_inner2) {
								$("#show_sjmc").append('<li></li>');
								$("#show_sjmc").find('li').last().html(item_inner2);
							});

							$311.SHOWMODAL();

						}
					});

				});

				var title_my = ['title'];
				var data = [
					[0, 0, 5],
					[0, 1, 1],
					[0, 2, 0],
					[0, 3, 0],
					[0, 4, 0],
					[0, 5, 0],
					[0, 6, 0],
					[0, 7, 0],
					[0, 8, 0],
					[0, 9, 0],
					[0, 10, 0],
					[0, 11, 2],
					[0, 12, 4],
					[0, 13, 1],
					[0, 14, 1],
					[0, 15, 3],
					[0, 16, 4],
					[0, 17, 6],
					[0, 18, 4],
					[0, 19, 4],
					[0, 20, 3],
					[0, 21, 3],
					[0, 22, 2],
					[0, 23, 5],
				];

				option = {
					tooltip: {
						position: 'top'
					},
					title: [],
					singleAxis: [],
					series: []
				};

				echarts.util.each(title_my, function(day, idx) {
					option.title.push({
						textBaseline: 'middle',
						top: (idx + 0.5) * 100 / 7 + '%',
						text: zcmc
					});
					option.singleAxis.push({
						left: 150,
						type: 'category',
						boundaryGap: false,
						data: hours,
						top: (idx * 100 / 7 + 5) + '%',
						height: (100 / 7 - 10) + '%',
						axisLabel: {
							interval: step
						}
					});
					option.series.push({
						singleAxisIndex: idx,
						coordinateSystem: 'singleAxis',
						type: 'scatter',
						name: '被攻击事件和次数',
						data: [],
						symbolSize: function(dataItem) {
							return dataItem[1] * 10;
						}
					});
				});

				echarts.util.each(data_pre, function(dataItem) {
					option.series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
				});
				if(option && typeof option === "object") {
					myChart.setOption(option, true);
				}

			}

		});
	</script>

</body>